<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唯爱薇o朝圣之路 VUE双向数据绑定</title>
    <!-- <script src="https://unpkg.com/vue@next" ></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
    data(){
        return{
            name: '唯爱薇o朝圣之路',
            checked: false,
            relatives: ["liumin","liuchen","liuxiaozhen","liulihua","liuxiaonian","liujianhua","liudongliang"],
            selected:[],
            select:'liuchen',

        }
    },
    methods:{
    },
    template:`
        <div>
            <label><strong>Input输入框双向数据绑定<strong></label>
            <p>{{ name }}</p>
            <input v-model="name"/>
        </div>
        <hr />
    
        <div>
            <label><strong>Textarea文本框双向数据绑定<strong></label>
            <p>{{ name }}</p>
            <textarea v-model="name"/>
        </div>
        <hr />

        <div>
            <label><strong>Checkbox复选框[勾选框|单选]双向数据绑定<strong></label>
            <p>{{ checked }}</p>
            <input type="checkbox" v-model="checked"/>
        </div>
        <hr />

        <div>
            <label><strong>Checkbox输入框[多选]双向数据绑定<strong></label>
            <p>{{ selected }}</p>
            <template v-for="(relative,index) in relatives" >
            {{ relative }} : <input type="checkbox" v-model="selected" :value="relative"/>
            <br />
            </template>
        </div>
        <hr />

        <div>
            <label><strong>Radio 单选按钮双向数据绑定<strong></label>
            <p>{{ select }}</p>
            <template v-for="(relative,index) in relatives" >
                {{ relative }} : <input type="radio" v-model="select" :value="relative"/>
                <br />
            </template>
        </div>
        <hr />
        <div>
            <label><strong>Checkbox复选框[勾选框|单选]且绑定默认值后输出 双向数据绑定<strong></label>
            <p>{{ checked }}</p>
            <input 
                type="checkbox" 
                v-model="checked"
                true-value="唯爱薇o朝圣路"
                false-value="edu.vlovev.cn"
            />
        </div>
        <hr />

        <div>
            <label><strong>Input输入框双向数据绑定<strong></label>
            <p>{{ name }}</p>
            <input v-model="name"/>
        </div>
        <hr />



        ` 
    })

    const vm=app.mount("#app")

</script>

</html>